<template>
	<view>
		<image src="/static/sybj.png" class="qjimg" mode=""></image>
		<view class="title">
			<image @click="fanhui" src="/static/zfh.png" :style="'margin-top:'+top+'px;'" mode=""></image>
			<view class="toptit" :style="'margin-top:'+top+'px;'">
				修改密码
			</view>
			<view class="" style="opacity: 0;">12</view>
		</view>
		<view class="box">

			<view class="box1">
				旧密码
			</view>
			<view class="box2">
				<input style="padding-left: 20rpx;" v-model="oldPassword" type="safe-password" password
					placeholder="请输入">
			</view>
			<view class="box1">
				新密码
			</view>
			<view class="box2">
				<input style="padding-left: 20rpx;" v-model="newPassword" type="safe-password" placeholder="请输入">
			</view>
			<view class="box1">
				重复新密码
			</view>
			<view class="box2">
				<input style="padding-left: 20rpx;" v-model="repeatPassword" type="safe-password" placeholder="请输入">
			</view>
			<view class="box3">
				<view class="box3-1" @click="fanhui">
					取消
				</view>
				<view class="box3-2" @click="repeat">
					确定
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				top: 0,
				oldPassword: '',
				newPassword: '',
				repeatPassword: ''
			}
		},
		onLoad() {
			let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
			// this.CustomBar = menuButtonInfo.bottom * 1 + 10
			this.top = menuButtonInfo.top * 1 + 6
		},
		methods: {
			fanhui() {
				uni.navigateBack({
					delta: 1
				})
			},
			repeat() {
				console.log(this.oldPassword, this.newPassword, this.repeatPassword);
				this.$post('wuyecenter/changepassword', {
					oldpassword: this.oldPassword,
					password: this.newPassword,
					repassword: this.repeatPassword
				}, res => {
					console.log(res);
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #e5e5e5;
	}

	.qjimg {
		width: 750rpx;
		height: 603rpx;
		position: absolute;
		top: 0;
		z-index: -1;
	}

	.title {
		display: flex;
		justify-content: space-between;
		align-items: center;

		>image {
			width: 20rpx;
			height: 35rpx;
			margin-left: 30rpx;
		}
	}

	.toptit {
		text-align: center;
		font-size: 36rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		color: #ffffff;
	}

	.box {
		background-color: #ffffff;
		width: 100%;
		margin-top: 20rpx;
		overflow: hidden;
	}

	.box1 {
		width: 686rpx;
		margin: 0 auto;
		margin-top: 37rpx;
		font-size: 24rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		color: #333333;
		line-height: 20rpx;
	}

	.box2 {
		width: 686rpx;
		height: 77rpx;
		margin: 0 auto;
		margin-top: 20rpx;
		background-color: #eaf2ff;
		line-height: 77rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;

		>image {
			margin-right: 30rpx;
			width: 16rpx;
			height: 9rpx;
		}
	}

	.box3 {
		width: 686rpx;
		margin: 30rpx auto;
		display: flex;
		justify-content: space-between;
	}

	.box3-1 {
		width: 331rpx;
		height: 90rpx;
		border: #7caafd solid 2rpx;
		border-radius: 45rpx;
		font-size: 30rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #000000;
		line-height: 90rpx;
		text-align: center;
	}

	.box3-2 {
		width: 331rpx;
		height: 90rpx;
		background-color: #2e79fd;
		border-radius: 45rpx;
		font-size: 30rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #ffffff;
		line-height: 90rpx;
		text-align: center;
	}
</style>
